<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./input.css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="test">
    <section>
      <h6>嵌套</h6>
      <div class="box">box</div>
      <div class="wrap-box">
        <div class="box">wrap box</div>
      </div>
    </section>
    <section>
      <h6>background</h6>
      <div class="backgroundBox">background box</div>
      <div class="backgroundColorBox">background-color box</div>
      <div class="backgroundRgbaBox">background-rgba box</div>
      <div class="backgroundRgbBox">background-rgb box</div>
      <div class="backgroundImageBox">backgroundImageBox box</div>
      <div class="backgroundImagepositionBox">backgroundImageBox position box</div>
      <div class="backgroundImageSizeBox">backgroundImage Size box</div>
      <div class="backgroundImageSizeNumberBox">backgroundImage SizeNumberBox box</div>
      <div class="backgroundImageOnlySizeBox">backgroundImage only Size box</div>
      <div class="backgroundImageOnlyPosBox">backgroundImage only Pos box</div>
    </section>
    <section>
      <h6>border</h6>
      <div class="borderBox">borderBox</div>
      <div class="borderTopBox">borderTopBox</div>
      <div class="borderRightBox">borderRightBox</div>
      <div class="borderBottomBox">borderBottomBox</div>
      <div class="borderLeftBox">borderLeftBox</div>
    </section>
    <section>
      <h6>transform</h6>
      <div class="transformScaleBox">transformScaleBox</div>
      <div class="transformSkewBox">transformSkewBox</div>
      <div class="transformTranslateBox">transformTranslateBox</div>
      <div class="transformBlendBox">transformBlendBox</div>
    </section>
    <section>
      <h6>animation</h6>
      <div class="animationBox">animationBox</div>
    </section>
  </div>
</body>

</html>